<template>
    <jb-crud-page ref="pageRef" searchUrl="/aiFunction/list" :conditions-align="'start'"
                  :searchConditions="pageConditions">
        <template #conditions-form>
            <jb-input v-model:value="pageConditions.keywords" placeholder="请输入关键词搜索"
                      style="width: 200px"></jb-input>
            <n-select placeholder="是否启用" style="width: 160px" v-model:value="pageConditions.enable"
                      :options="[{ label: '启用', value: true}, { label: '禁用', value: false}]"></n-select>
        </template>
        <template #opt>
            <!--        <jb-btn type="primary" secondary :modalComponent="FunctionEdit" modalTitle="添加Function" @modalYesClick="handleModalYesClick">添加Function</jb-btn>-->
            <div>
                <n-dropdown trigger="hover" :options="options" :render-option="renderOption" @select="handleSelect">
                    <jb-btn :icon="Icons.RESET" type="primary">同步</jb-btn>
                </n-dropdown>
            </div>
        </template>

        <template #default="{list,tableStartIndex}">
            <jb-super-table :data="list"
                            :start-index="tableStartIndex"
            >
                <jb-super-column type="seq" title="序号" width="60" fixed="left"></jb-super-column>
                <jb-super-column
                    field="sn"
                    title="编号"
                    min-width="160"
                    fixed="left"
                    editable="input"
                    edit-submit-url="/aiFunction/update"
                    @handleSubmit="pageRef.loadData()"
                ></jb-super-column>
                <jb-super-column
                    field="briefInfo"
                    title="功能描述"
                    min-width="160"
                    editable="input"
                    edit-submit-url="/aiFunction/update"
                    @handleSubmit="pageRef.loadData()"
                ></jb-super-column>
                <jb-super-column
                    field="serviceClass"
                    title="所属类"
                    min-width="300"

                ></jb-super-column>
                <jb-super-column
                    field="serviceMethod"
                    title="执行方法"
                    min-width="300"

                ></jb-super-column>
                <jb-super-column
                    fixed="right"
                    field="apiKey"
                    title="参数管理"
                    min-width="180"
                >
                    <template #default="{row}">
                        <jb-btn type="primary" ghost :drawerComponent="ParamManagement"
                                :drawerComponentProps="{functionId: row.id}" :drawerArgs="{width: '1200px'}">管理参数:
                            {{ row.paramCount }} 个
                        </jb-btn>
                    </template>
                </jb-super-column>
                <jb-super-column
                    fixed="right"
                    field="enable"
                    title="是否启用"
                    width="100"
                >
                    <template #default="{ row }">
                        <jb-switch v-model:value="row.enable" :url="`/aiFunction/toggleEnable/${row.id}`"
                                   @update:value="pageRef.loadData()"></jb-switch>
                    </template>
                </jb-super-column>

                <!--          <jb-super-column title="操作" width="120" fixed="right">-->
                <!--            <template #default="{ row }">-->
                <!--                <jb-btn class="mx-8px" tip-text="删除资源" secondary circle type="error" :icon="Icons.DELETE" @click="handleDelete(row)"-->
                <!--                ></jb-btn>-->
                <!--              </template>-->

                <!--            </jb-super-column>-->

            </jb-super-table>
        </template>
    </jb-crud-page>
</template>

<script setup>
import {h, onMounted, ref} from 'vue'
import ParamManagement from './cpns/param-management/index.vue'
import {useResetableData} from '@/hooks/common/use-resetable-data'
import {NTooltip, useDialog, useMessage} from 'naive-ui'
import {JBoltApi} from "@/service/request/index.js";
import {Icons} from "@/constants/index.js";

const message = useMessage()
const dialog = useDialog()


const pageRef = ref(null)
const pageConditions = useResetableData({
    keywords: '',
    enable: null
})

function handleModalYesClick({componentRef, close}) {
    componentRef.submit(() => {
        close()
        pageRef.value.loadData()
    })
}

function handleDelete(row) {
    JBoltApi.tryGet(`aiFunction/del/${row.id}/false`, null, {
        ignoreMsg: true
    }).then(res => {
        console.log('res', res)
        dialog.warning({
            title: '提示',
            content: res.msg,
            positiveText: '确定',
            negativeText: '取消',
            onPositiveClick: () => {
                message.success('确定')
                JBoltApi.tryGet(`aiFunction/del/${row.id}/true`).catch((error) => {
                    message.error(error)
                })
            },
        })
    }).catch((error) => {
        message.error(error)
    })

}

const options = ref([])

function renderOption({
                          node,
                          option
                      }) {
    return h(
        NTooltip,
        {keepAliveOnHover: false, style: {width: 'max-content'}},
        {
            trigger: () => [node],
            default: () => option.remark
        }
    )
}

function handleSelect(key, option) {
    console.log('key', key, option)

    JBoltApi.tryGet('/aiFunction/syncNativeFunctions', {
        strategyCode: key
    }).then(res => {
        pageRef.value.loadData()

    }).catch((error)=>{
        message.error(error)
    })

}

onMounted(() => {
    JBoltApi.tryGet('/aiFunction/syncStrategyList').then(res => {
        options.value = res.data
    }).catch(error => {
        console.error(error)
    })
})
</script>

<style scoped>

</style>
